/* stylelint-disable value-keyword-case */
/* stylelint-disable CssSyntaxError */
/* stylelint-disable selector-pseudo-element-no-unknown */
@use "./tailwind.scss";
@use "./element-plus/index.scss";
@use "./element-plus/override.scss";
@use "./public-style.scss";
@use "./scroll.scss";
@import "./transition";
@import "@micro/assets/global";
@import "../../MicroApp/iconfont/iconfont.css";
@import "@/assets/iconfont-flow/iconfont.css";

// 页面布局 CSS 变量
:root {
  // 这是一个复合变量
  // 当页宽模式为 adaption-min-width 时，它代表 最小宽度
  // 当页宽模式为 center 时，它代表 固定宽度
  // 当页宽模式为 center-max-width 时，它代表 最大宽度
  --ik-app-width: #{$g-app-width};
  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
  --ik-header-width: #{$g-header-width};
  // 头部高度
  --ik-header-height: 64px;
  // 侧边栏宽度
  --ik-main-sidebar-width: 90px;
  --ik-sub-sidebar-width: 256px;
  --ik-sub-sidebar-collapse-width: 64px;
  // 侧边栏 Logo 区域高度
  --ik-sidebar-logo-height: 64px;
  // 标签栏高度
  --ik-tabbar-height: 28px;
  // 面包屑高度
  --ik-breamcrumb-height: 17px;
  // 工具栏高度
  --ik-toolbar-height: 64px;
  // 标签页最大最小宽度，两个宽度为同一数值时，则为固定宽度，反之将宽度设置为 unset 则为自适应
  --ik-tabbar-tab-max-width: 150px;
  --ik-tabbar-tab-min-width: 100px;
  // 滚动条宽高
  --ik-scrollbar-width: 6px;
  --ik-scrollbar-height: 0;

  --ik-table-checkbox-bg: #e5f1f7;
  --ik-input-disabled-bg: #E3E4E9;
  --ik-scrollbar-color: rgb(187 186 186 / 45.1%);
  --ik-scrollbar-hover-color: rgb(187 186 186 / 35.1%);
  // card  header高度
  --ik-card-header-height: 66px;
  // 最小单位
  --base-margin: 8px;
  --base-padding: 8px;
  --base-radius: 4px;
  --base-m: 8px;
  --base-p: 8px;

  // 可选的状态值颜色
  --ik-statu-color-1: #029EF7;
  --ik-statu-color-1-light: #E5F5FE;
  --ik-statu-color-2: #50CD89;
  --ik-statu-color-2-light: #E6F5EE;
  --ik-statu-color-3: #F1416C;
  --ik-statu-color-3-light: #FDECF0;
  --ik-statu-color-4: #FFC700;
  --ik-statu-color-4-light: #FFF8E0;
  --ik-statu-color-5: #04C8C8;
  --ik-statu-color-5-light: #E5F9F9;
  --ik-statu-color-6: #366CF9;
  --ik-statu-color-6-light: #EAF0FE;
  --ik-statu-color-7: #7240EA;
  --ik-statu-color-7-light: #F0EBFC;
  --ik-statu-color-8: #FFA621;
  --ik-statu-color-8-light: #FFF6E8;
  --ik-margin-top-with-bread: 0px;

  /**
   * @description: 覆盖element的样式变量
   * @return {*}
   */
  --ik-switch-height: 26px;
  --el-font-family: 'SYHT', sans-serif, "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, libaba;
}

// 明暗模式 CSS 变量
/* stylelint-disable-next-line no-duplicate-selectors */
:root {
  &::view-transition-old(root),
  &::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  &::view-transition-old(root) {
    z-index: 1;
  }

  &::view-transition-new(root) {
    z-index: 9999;
  }

  --ik-box-shadow-color: rgb(0 0 0 / 12%);

  &.dark {
    --ik-table-checkbox-bg: #2B2B40;
    --ik-input-disabled-bg: #2B2B40;


    &::view-transition-old(root) {
      z-index: 9999;
    }

    &::view-transition-new(root) {
      z-index: 1;
    }

    --ik-box-shadow-color: rgb(0 0 0 / 72%);
  }

  @include set-themes-css-var;
}

@font-face {
  font-family: SYHT;
  src: url("../fonts/SourceHanSansSC-Normal.otf");
  font-weight: normal;
  font-style: normal;
}

// @font-face {
//   font-family: Alibaba;
//   src: url("../fonts/AlimamaAgileVF-Thin.ttf");
//   font-weight: normal;
//   font-style: normal;
// }

html,
body {
  height: 100%;
  font-family: var(--el-font-family);
}

body {
  margin: 0 !important;
  background-color: var(--ik-app-bg);
  transition: background-color 0.3s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;

  &.ik_hidden {
    overflow: hidden;
  }
}

* {
  box-sizing: inherit;
  outline: none;
}

p,
ul {
  margin: 0;
  padding: 0;
}

.iconfont {
  font-size: inherit;
}

// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
[data-fixed-calc-width] {
  position: fixed;
  left: 50%;
  right: 0;
}

[data-app-width-mode="adaption"],
[data-app-width-mode="adaption-min-width"] {
  [data-fixed-calc-width] {
    // - var(--base-m) * 2
    width: calc(100% - var(--ik-main-sidebar-actual-width) - var(--ik-sub-sidebar-actual-width));
    transform: translateX(-50%) translateX(calc(var(--ik-main-sidebar-actual-width) / 2)) translateX(calc(var(--ik-sub-sidebar-actual-width) / 2));
  }
}

[data-app-width-mode="center"],
[data-app-width-mode="center-max-width"] {
  [data-fixed-calc-width] {
    width: calc(var(--ik-app-width) - var(--ik-main-sidebar-actual-width) - var(--ik-sub-sidebar-actual-width));
    transform: translateX(-50%) translateX(calc(var(--ik-main-sidebar-actual-width) / 2)) translateX(calc(var(--ik-sub-sidebar-actual-width) / 2));
  }

  @media screen and (max-width: $g-app-width) {
    [data-fixed-calc-width] {
      width: calc(100% - var(--ik-main-sidebar-actual-width) - var(--ik-sub-sidebar-actual-width));
      transform: translateX(-50%) translateX(calc(var(--ik-main-sidebar-actual-width) / 2)) translateX(calc(var(--ik-sub-sidebar-actual-width) / 2));
    }
  }
}

[data-mode="mobile"] {
  [data-fixed-calc-width] {
    width: 100% !important;
    transform: translateX(-50%) !important;
  }
}

// textarea 字体跟随系统
textarea {
  font-family: inherit;
}

button,
[type="submit"] {
  background-color: unset;
}

// 公共padding
.gl-padding {
  margin: var(--ik-margin-top-with-bread) 24px 24px 24px;
}

// 页面自适应高度
.gl-absolute-container {
  position: absolute;
  overflow: auto;
}

// 页面容器
.gl-absolute-container,
.gl-container {
  background-color: var(--ik-card-bg);
  display: flex;
  flex-direction: column;
  // 间距宽度 * 2
  width: calc(100% - 48px);
  height: calc(100% - 24px);
  border-radius: 12px;

  &.fixed-height {
    height: calc(100% - 24px - var(--ik-margin-top-with-bread)) !important;
    overflow: hidden;
    // content-visibility: auto;
  }
}

// 图标默认动作
.ik {
  cursor: pointer;
  transition: color 0.25s ease;

  &:hover {
    color: var(--el-color-primary);
  }
}

// 空数据自动添加--
.cell:empty::before {
  content: "--";
  color: var(--el-color-info-light-3);
}

// 页面存在tab页时
.gl-content-tabs {
  height: 100%;

  .el-tabs__header.is-top {
    top: calc(0px - var(--el-card-padding));
  }

  .el-tabs__content,
  .el-tab-pane {
    height: 100%;
  }
}

.el-dialog {
  --el-dialog-padding-primary: 15px;
  --el-dialog-border-radius: 10px;

  .el-dialog__header {
    background: var(--ik-header-bg);
    // margin-right: 0;
    border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
    // padding-bottom: var(--el-dialog-padding-primary);
    border-bottom: 1px solid var(--el-border-color);
  }
}


.title-info {
  color: var(--ik-tabbar-tab-color);

  &.lineheight-1 {
    line-height: 1;
    padding-top: var(--base-padding);
  }
}

@mixin radiu-button {
  border-radius: 0;
  height: 100%;
  padding: calc(var(--base-padding) * 2) 0;
  border: none;
  flex: 1;
}

.el-dialog__footer {
  padding: var(--el-dialog-padding-primary) 32px;

  button {
    min-width: 88px;
  }
}

.el-sub-menu__title {
  &:hover {
    .ik-icon-btn {
      --ik-main-icon-deep-color: var(--el-color-primary);
      --ik-main-icon-color: var(--ik-theme-color-re);
    }
  }

  svg {
    // height: 16px;
    // width: 24px;
  }
}

.el-table__cell {
  .cell {
    .ik-icon-btn.show-bg.default svg {
      width: 22px;
      height: 16px;
    }
  }
}

.p_p_picker-dialog-modal {
  .p_p_picker-dialog {
    &::before {
      display: none;
    }

    .el-dialog__body {
      padding: 15px;
      position: relative;

      .dep-use-picker {
        &::after {
          content: ' ';
          display: block;
          position: absolute;
          height: calc(100% + 15px);
          top: -15px;
          width: 1px;
          background: var(--ik-border-color);
          left: calc(50% + 1px);
        }
      }
    }
  }

}

// .p_picker-dialog .dep-use-picker .sel-list,
// .p_picker-dialog .dep-use-picker .choose-list {
//   display: flex;
//   flex-direction: column;

//   .view-list {
//     overflow: auto;

//     .filter-user {
//       width: calc(100% - 55px);

//       span {
//         display: inline-block;
//         line-height: 1;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         word-break: keep-all;
//       }
//     }
//   }

//   .left-pick-list {
//     // padding-left: 8px;
//   }
// }
